<html>
  <head>
    <title>Painter</title>
<!--    
    <script src="CPWidgets.js" type="text/javascript"></script>
    <script src="CPAnimator.js" type="text/javascript"></script>
    <script src="CPDrawing.js" type="text/javascript"></script>
-->
    <%= javascript_include_tag 'prototype' %>
    <%= javascript_include_tag 'cp_depends' %>
    <%= javascript_include_tag 'CanvasWidget' %>
    <%= javascript_include_tag 'CanvasPainter' %>
    <%= javascript_include_tag 'CPDrawing' %>

<style type="text/css">
	canvas {
		border: 1px solid #AAAAAA;
	}
	#canvas {
		position: absolute;
		left: 90px;
		top: 10px;
	}
	#canvasInterface {
		position: absolute;
		left: 90px;
		top: 10px;
	}
</style>

    <script type="text/javascript">
    	var canvasPainter;
    	var saveDrawing;
    	var canvasAnimator;
    	var colorWidget;
    	var lineWidthWidget;
    	var transportWidget;

    	function doOnLoad() {	
    		if(CanvasHelper.canvasExists("canvas")) {
    			canvasPainter = new CanvasPainter("canvas", "canvasInterface", {x: 90, y: 10});
    			//init save objects
    			saveDrawing = new CPDrawing(canvasPainter);
    		} else {
    		}
    	}
      function setCPDrawAction(action) {
        canvasPainter.setDrawAction(action);
      }
      function sendDrawings() {
        var drawings = saveDrawing.drawing;
        var str = Object.toJSON(drawings);
        new Ajax.Request('/images/save_image', {
          asynchronous:true,
          evalScripts:true,
          parameters: {data: str},
        });
      }
    </script>
  </head>
  <body onload="doOnLoad()">
    <%= yield %>
  </body>
</html>
